<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toProjectManagement">查看详情 <a-icon type="right-circle"/></router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="年度取暖项目汇总">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in projectYears"
                :type="val.type"
                @click="projectYearsChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <doughnut :chartData="yearProjectNum" />
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="区域的年度完成率排名">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in finishYears"
                :type="val.type"
                @click="finishYearsChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <simple :chartData="areaFinishingRate" :type="'scale'" />
          </a-card>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <map-chart :targetArea="targetArea" @mapChange="mapChange" />
            <ul class="supplier-list">
              <li
                v-for="(item, index) in areaList"
                :key="index"
                :class="{ checked: item.checked }"
                @click="areaClick(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <stacked :chartData="yearUserNum" />
        </a-col>
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="已开工">
            <div class="chart-head">
              <div>吴村清洁取暖项目</div>
              <div>2020年1月1日</div>
            </div>
            <cross-bar1></cross-bar1>
          </a-card>
          <a-card class="index-ant-card card-list" :style="{ 'margin-bottom': '16px' }" size="small" title="已完工">
            <div class="chart-head">
              <div>清水村清洁取暖项目</div>
            </div>
            <ul class="finish-project">
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
            </ul>
            <div class="chart-head">
              <div>王村清洁取暖项目</div>
            </div>
            <ul class="finish-project">
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
            </ul>
            <div class="chart-head">
              <div>王村清洁取暖项目</div>
            </div>
            <ul class="finish-project">
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
              <li><span>xxx项目</span><span>2020年1月1日</span></li>
            </ul>
          </a-card>
        </a-col>
      </a-row>
      <!-- <num-animate></num-animate> -->
    </a-layout-content>
    <a-modal class="chart-modal" v-model="visible" maskClosable :closable="false">
      <cross-bar2></cross-bar2>
    </a-modal>
  </div>
</template>

<script>
import Doughnut from '@/components/CleanBaskDemo/doughnut'
import MapChart from '@/components/CleanBaskDemo/map'
import Simple from '@/components/CleanBaskDemo/simple'
import Stacked from '@/components/CleanBaskDemo/stacked'
import CrossBar1 from '@/components/CleanBaskDemo/crossBar1'
import CrossBar2 from '@/components/CleanBaskDemo/crossBar2'
import CrossBar3 from '@/components/CleanBaskDemo/crossBar3'
import SupplierListModule from '@/components/CleanBaskDemo/supplierListModule'
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
export default {
  name: 'SupplierManagement',
  components: {
    Doughnut,
    MapChart,
    Simple,
    Stacked,
    CrossBar1,
    CrossBar2,
    CrossBar3,
    SupplierListModule,
    NumAnimate
  },
  data () {
    return {
      visible: false,
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      projectYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      // 年度取暖项目汇总
      yearProjectNum: [
        { value: 895, name: '煤改电' },
        { value: 1563, name: '煤改气' },
        { value: 3562, name: '集中供热' },
        { value: 365, name: '其他' }
      ],
      finishYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      // 区域的年度完成率排名
      areaFinishingRate: [
        { name: '清徐县', subVal: 65, value: 0.65 },
        { name: '阳曲县', subVal: 52, value: 0.52 },
        { name: '娄烦县', subVal: 48, value: 0.48 },
        { name: '小店区', subVal: 42, value: 0.42 },
        { name: '迎泽区', subVal: 38, value: 0.38 },
        { name: '杏花岭区', subVal: 32, value: 0.32 },
        { name: '尖草坪区', subVal: 26, value: 0.26 }
      ],
      // 年度用户汇总
      yearUserNum: {
        name: '年度项目数汇总',
        data: [
          { num3: 407, num2: 150, num1: 107, name: '刘家堡乡' },
          { num3: 466, num2: 300, num1: 203, name: '坞城街道' },
          { num3: 587, num2: 366, num1: 207, name: '营盘街道' },
          { num3: 769, num2: 580, num1: 303, name: '西温庄' },
          { num3: 410, num2: 288, num1: 90, name: '北格镇' },
          { num3: 564, num2: 456, num1: 303, name: '北营街道' },
          { num3: 379, num2: 254, num1: 90, name: '小店街道' }
        ]
      }
    }
  },
  methods: {
    areaClick (index) {
      this.visible = true
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    mapChange (name) {
      this.visible = true
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    projectYearsChange (val) {
      this.projectYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.yearProjectNum = [
            { value: 895, name: '煤改电' },
            { value: 1563, name: '煤改气' },
            { value: 3562, name: '集中供热' },
            { value: 365, name: '其他' }
          ]
          return
        case '2019年':
          this.yearProjectNum = [
            { value: 995, name: '煤改电' },
            { value: 1663, name: '煤改气' },
            { value: 3662, name: '集中供热' },
            { value: 465, name: '其他' }
          ]
          return
        case '2020年':
          this.yearProjectNum = [
            { value: 1095, name: '煤改电' },
            { value: 1763, name: '煤改气' },
            { value: 3762, name: '集中供热' },
            { value: 565, name: '其他' }
          ]
      }
    },
    finishYearsChange (val) {
      this.finishYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.areaFinishingRate = [
            { name: '清徐县', subVal: 65, value: 0.65 },
            { name: '阳曲县', subVal: 52, value: 0.52 },
            { name: '娄烦县', subVal: 48, value: 0.48 },
            { name: '小店区', subVal: 42, value: 0.42 },
            { name: '迎泽区', subVal: 38, value: 0.38 },
            { name: '杏花岭区', subVal: 32, value: 0.32 },
            { name: '尖草坪区', subVal: 26, value: 0.26 }
          ]
          return
        case '2019年':
          this.areaFinishingRate = [
            { name: '清徐县', subVal: 70, value: 0.7 },
            { name: '阳曲县', subVal: 57, value: 0.57 },
            { name: '娄烦县', subVal: 53, value: 0.53 },
            { name: '小店区', subVal: 47, value: 0.47 },
            { name: '迎泽区', subVal: 43, value: 0.43 },
            { name: '杏花岭区', subVal: 37, value: 0.37 },
            { name: '尖草坪区', subVal: 31, value: 0.31 }
          ]
          return
        case '2020年':
          this.areaFinishingRate = [
            { name: '清徐县', subVal: 75, value: 0.75 },
            { name: '阳曲县', subVal: 62, value: 0.62 },
            { name: '娄烦县', subVal: 58, value: 0.58 },
            { name: '小店区', subVal: 52, value: 0.52 },
            { name: '迎泽区', subVal: 48, value: 0.48 },
            { name: '杏花岭区', subVal: 42, value: 0.42 },
            { name: '尖草坪区', subVal: 36, value: 0.36 }
          ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
  .finish-project {
    list-style: none;
    padding: 8px 0 0 8px;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
  }
  .ant-card.card-list /deep/ .ant-card-body {
    height: 347px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #ccc;
    }
    &.side-menu::-webkit-scrollbar-thumb {
      background: transparent;
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
